<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情页</title>
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<!--引入css初始化文件-->
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<!--头部和底部 结构基本相同，做基本的公共样式-->
		<link rel="stylesheet" type="text/css" href="css/bace.css" />
		<!-- 中间部分 -->
		<link rel="stylesheet" type="text/css" href="css/index2.css" />
		<script src="jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<header>
			<div class="let">
				你好：<em></em>
				<a href='#' class="exit">退出</a>
			</div>
			<div class="w">
				<a href="javascript:;">
					<img src="images/top.jpg">
				</a>
			</div>
		</header>
		<div class="shortcut">
			<div class="w">
				<ul class="fl city">
					<li><i class="f10"></i><a href='javascript:;'>河南</a></li>
				</ul>
				<ul class="fr">
					<li>
						<a href="login.html" class="login">你好，请登录</a>
						<a href="register.html" class="f10 register">免费注册</a>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>我的订单</a>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>我的京东</a>
						<i></i>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>京东会员</a>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;' class="f10">企业采购</a>
						<i></i>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;'>客户服务</a>
						<i></i>
					</li>
					<li>
						<a href='javascript:;'>网站导航</a>
						<i></i>
					</li>
					<li class="space"></li><!-- space是每个后面的竖线 -->
					<li>
						<a href='javascript:;' class="mobile">手机京东
							<img src="images/mobile.png" height="60" width="60" alt="">
						</a>
					</li>
					<li>
						<a href='javascript:;'></a>
					</li>
				</ul>
			</div>
		</div>
		<div class="w middle">
			<div class="logo">
				<h1>
					<a href='javascript:;'></a>
				</h1>
			</div>
			<!-- 搜索 -->
			<div class="form">
				<input type="text" placeholder="行车记录仪">
				<button><i></i></button>
			</div>
			<!-- 购物车 -->
			<div class="shopCar">
				<span class="icon-cart"></span><a href='javascript:;'>我的购物车</a><span class="aSpan">0</span>
			</div>
			<!-- 关键词 -->
			<div class="hotworde">
				<a href='javascript:;' class="f10">新房大促销</a>
				<a href='javascript:;'>空调钜惠</a>
				<a href='javascript:;'>每日坚果</a>
				<a href='javascript:;'>华为</a>
				<a href='javascript:;'>买一赠一</a>
				<a href='javascript:;'>纸尿裤</a>
				<a href='javascript:;'>高效农机</a>
				<a href='javascript:;'>新鲜助V</a>
				<a href='javascript:;'>每100-50</a>
			</div>
			<!-- 小导航部分 -->
			<div class="navitems">
				<ul>
					<li><a href='javascript:;' class="f10">秒杀</a></li>
					<li><a href='javascript:;'>优惠卷</a></li>
					<li><a href='javascript:;'>PLUS会员</a></li>
					<li><a href='javascript:;'>闪购</a></li>
					<li class="space"></li>
					<li><a href='javascript:;'>拍卖</a></li>
					<li><a href='javascript:;'>京东时尚</a></li>
					<li><a href='javascript:;'>京东超市</a></li>
					<li><a href='javascript:;'>京东生鲜</a></li>
					<li class="space"></li>
					<li><a href='javascript:;'>海囤全球</a></li>
					<li><a href='javascript:;'>京东金融</a></li>
				</ul>
			</div>
		</div>
		<!--中间头部分 end-->
		<!-- 右侧浮动部分 -->
		<div class="subnav">
			<ul>
				<li>会员
					<div><a href='javascript:;'>京东会员</a></div>
				</li>
				<li>购物
					<div><a href='javascript:;'>购物车</a></div>
				</li>
				<li>关注
					<div><a href='javascript:;'>我的关注</a></div>
				</li>
				<li>足迹
					<div><a href='javascript:;'>我的足迹</a></div>
				</li>
				<li>消息
					<div><a href='javascript:;'>我的消息</a></div>
				</li>
				<li>咨询
					<div><a href='javascript:;'>咨询JIMI</a></div>
				</li>
				<li>反馈
					<div><a href='javascript:;'>反馈</a></div>
				</li>
			</ul>
		</div>
		<!--详情-->

		<div id="zjxqy">
			<div id="zoomBox"></div>
		</div>

		<!--详情end-->
		<!-- 页面底部分 start-->
		<footer>
			<div class="serv">
				<div class="w">
					<ul>
						<li>
							<h5>多</h5>
							<p>品类齐全，轻松购物</p>
						</li>
						<li>
							<h5>快</h5>
							<p>多仓直发，极速配送好</p>
						</li>
						<li>
							<h5>好</h5>
							<p>正品行货，精致服务</p>
						</li>
						<li>
							<h5>省</h5>
							<p>天天低价，畅选无忧</p>
						</li>

					</ul>
				</div>
			</div>
			<!-- 帮助模块 -->
			<div class="w help">
				<div class="ditu">
					<dl>
						<dt>购物指南</dt>
						<dd><a href='javascript:;'>购物流程</a></dd>
						<dd><a href='javascript:;'>会员介绍</a></dd>
						<dd><a href='javascript:;'>生活旅行</a></dd>
						<dd><a href='javascript:;'>常见问题</a></dd>
						<dd><a href='javascript:;'>大家电</a></dd>
						<dd><a href='javascript:;'>联系客服</a></dd>
					</dl>
					<dl>
						<dt>配送方式</dt>
						<dd><a href='javascript:;'>上门自提</a></dd>
						<dd><a href='javascript:;'>211限时达</a></dd>
						<dd><a href='javascript:;'>配送服务查询</a></dd>
						<dd><a href='javascript:;'>配送费收取标准</a></dd>
						<dd><a href='javascript:;'>海外配送</a></dd>
					</dl>
					<dl>
						<dt>支付方式</dt>
						<dd><a href='javascript:;'>货到付款</a></dd>
						<dd><a href='javascript:;'>在线支付</a></dd>
						<dd><a href='javascript:;'>分期付款</a></dd>
						<dd><a href='javascript:;'>邮局汇款</a></dd>
						<dd><a href='javascript:;'>公司转账</a></dd>
					</dl>
					<dl>
						<dt>售后服务</dt>
						<dd><a href='javascript:;'>售后政策</a></dd>
						<dd><a href='javascript:;'>价格保护</a></dd>
						<dd><a href='javascript:;'>退款说明</a></dd>
						<dd><a href='javascript:;'>返修/退换货</a></dd>
						<dd><a href='javascript:;'>取消订单</a></dd>
					</dl>
					<dl>
						<dt>特色服务</dt>
						<dd><a href='javascript:;'>夺宝岛</a></dd>
						<dd><a href='javascript:;'>DIY装机</a></dd>
						<dd><a href='javascript:;'>延保服务</a></dd>
						<dd><a href='javascript:;'>京东E卡</a></dd>
						<dd><a href='javascript:;'>京东通信</a></dd>
						<dd><a href='javascript:;'>京东JD+</a></dd>
					</dl>
				</div>
				<div class="coverage">

					<h5>京东自营覆盖区县</h5>
					<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
					<a href='javascript:;'>查看详情<</a> </div> <!-- 版权模块 -->
							<div class="w copyright">
								<p>
									<a href='javascript:;'>关于我们</a>
									<span>|</span>
									<a href='javascript:;'>联系我们</a>
									<span>|</span>
									<a href='javascript:;'>联系客服</a>
									<span>|</span>
									<a href='javascript:;'>合作招商</a>
									<span>|</span>
									<a href='javascript:;'>商家帮助</a>
									<span>|</span>
									<a href='javascript:;'>营销中心</a>
									<span>|</span>
									<a href='javascript:;'>手机京东</a>
									<span>|</span>
									<a href='javascript:;'>友情链接</a>
									<span>|</span>
									<a href='javascript:;'>销售联盟</a>
									<span>|</span>
									<a href='javascript:;'>京东社区</a>
									<span>|</span>
									<a href='javascript:;'>风险监测</a>
									<span>|</span>
									<a href='javascript:;'>隐私政策</a>
									<span>|</span>
									<a href='javascript:;'>京东公益</a>
									<span>|</span>
									<a href='javascript:;'>English Site</a>
									<span>|</span>
									<a href='javascript:;'>Media & IR</a>
								</p>
								<div>
									<p>
										京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零
										字第大120007号
									</p>
									<p>
										互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155
									</p>
									<p>
										Copyright © 2004 - 2017 京东JD.com 版权所有<span>|</span>消费者维权热线：4006067733经营证照
									</p>
									<p>
										京东旗下网站：京东支付<span>|</span>京东云
									</p>
								</div>
								<p class="footicon">
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
									<a href='javascript:;'></a>
								</p>
							</div>
				</div>
				<!-- 底部部分  end -->
		</footer>
		<!-- 页面底部分 end-->
	</body>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		let url = new URL(location.href)
		let id = url.searchParams.get('id')
		let token = localStorage.getItem('token')
		console.log(location.search.split('=')[1])
		// let id = location.search.split('=')[1]
		$.get("http://47.104.244.134:8080/goodsbyid.do", {
			id
		}).done(data => {
			// console.log(data);
			let html = `
				<div id="midArea">
					<img src="${data.picurl}">
					<div id="zoom"></div>
				</div>
				<div id="smallArea">
					<ul>
						<li><img src="${data.picurl}"></li>
						<li><img src="${data.picurl}"></li>
						<li><img src="${data.picurl}"></li>
						<li><img src="${data.picurl}"></li>
					</ul>
				</div>
				
				<div id="bigArea">
					<img src="${data.picurl}">
				</div>
				<!-- 放大镜 -->
				<div id="huawei">
					<ul>
						<li>
							<h2>${data.name}</h2>
						</li>
						<li><span>闪购价：</span>￥${data.price}</li>
						<li><span>优惠卷：</span>满${data.price+10}减${data.price/20}</li>
						<li>套装:优惠套餐1/优惠套餐2/优惠套餐3</li>
						<li>选择版本：6GB+128GB+2000万/8GB+128GB+2000万/8GB+128GB+4000万</li>
						<li>
							<span>配送至</span>
							<select name="">
								<option value="河南郑州二七区">河南郑州二七区</option>
							</select>
						</li>
						<li><a href="javascript:;">99元免基础运费(10kg内)</a><a href="javascript:;">京准达</a><a href="javascript:;">211限时达</a></li>
						<li>
							<p>有京东发货，并提供售后服务，11:00前下单，预计今天(06月26日)送达</p>
						</li>
						<li>
							<div id="cart6">
								<form action="" method="">
									<input type="text" name="" id="" value="1" />
									<input type="button" name="" id="" value="+" />
									<input type="button" name="" id="" value="-" />
								</form>
								<button type="button" id="btn"><a href="javascrit:;">加入购物车</a></button>
							</div>
						</li>
					</ul>
				</div>
			`
			
			$('#zoomBox').html(html)
			
			$('#cart6 input').eq(1).click(function() {
				$('#cart6 input').eq(0).val(parseInt($('#cart6 input').eq(0).val()) + 1)
			})
			//减功能
			$('#cart6 input').eq(2).click(function() {
				if ($('#cart6 input').eq(0).val() > 1) {
					$('#cart6 input').eq(0).val(parseInt($('#cart6 input').eq(0).val()) - 1)
				} else {
					$('#cart6 input').eq(0).val(1)
				}

			})


			class Fdj {
				constructor(el) {
					this.el = document.querySelector(el)

					this.small = this.el.querySelector('#midArea')
					this.mask = this.el.querySelector('#zoom')
					this.big = this.el.querySelector('#bigArea')
					this.bigImg = this.el.querySelector('#bigArea img')

					//  调整  小图/mask=大图/bigDiv
					//  大图 =  小图/mask * bigDiv			 
					this.small.onmouseover = function() {
						this.mask.style.display = 'block'
						this.big.style.display = 'block'

						let bigImgWidth = this.small.offsetWidth / this.mask.offsetWidth * this.big.offsetWidth
						this.bigImg.style.width = bigImgWidth + 'px'

					}.bind(this)

					this.small.onmouseout = () => {
						this.mask.style.display = 'none'
						this.big.style.display = 'none'
					}

					this.small.onmousemove = (evt) => {
						let offsetX = evt.pageX - this.el.offsetLeft
						let offsetY = evt.pageY - this.el.offsetTop

						let maskLeft = offsetX - this.mask.offsetWidth / 2
						let maskTop = offsetY - this.mask.offsetWidth / 2
						if (maskLeft <= 0) {
							maskLeft = 0;
						}
						if (maskTop <= 0) {
							maskTop = 0
						}
						if (maskLeft >= this.small.offsetWidth - this.mask.offsetWidth) {
							maskLeft = this.small.offsetWidth - this.mask.offsetWidth
						}

						let tmp = this.bigImg.offsetWidth / this.small.offsetWidth

						this.mask.style.left = maskLeft + 'px'
						this.mask.style.top = maskTop + 'px'

						this.bigImg.style.left = -maskLeft * tmp + 'px'
						this.bigImg.style.top = -maskTop * tmp + 'px'
					}
				}
			}
			new Fdj('#zjxqy')
			
			<!-- 加入购物车 -->
			$('#btn').click(function(){
				$.post("http://47.104.244.134:8080/cartsave.do",{
					gid:data.id,
					token
				}).done(data=>{
					if(data.code == 0){
						alert('加入购物车成功')
						location.href = 'cart.html'
					}
				})
			})
			
			
			
		})
	</script>
</html>
